@charset 'utf-8';

@import 'common';

.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: gr(90);
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
}

footer{
    width: 100%;
    height: gr(90);
    position: absolute;
    bottom: 0;
}

.cancel-btn{    
        margin-left:gr(20);
        text-align: center;
        float: left;
        input{
//          width: gr(63);
            height: gr(41);
            background: white;
            font-size: gr(29);
            color: #999999;
            margin-top: gr(26);
            border: none;
            appearance: none;
            -webkit-appearance: none;
        }
}

.title{
    width: gr(95);
    height: gr(41);
    font-size: gr(29);
    font-weight: normal;
    text-align: center;
    margin: gr(29) auto 0;
}


.sign{
    width: gr(580);
    margin: gr(38) auto 0;
    .sign-top{
        width: gr(170);
        height: gr(144);
        margin: 0 auto;
        img{
            width: 100%;
        }
    }
    .sign-mid,.sign-bottom{
        width: gr(331);
        height: gr(40);
        margin: 0 auto;
        img{
            width: 100%;
        }
    }
}

.account,.password{
    width: gr(580);
    height: gr(84);
    font-size: 0;
    position: relative;
    line-height: gr(84);
    border: 1px solid #dfdfdd;
    span{
        display: inline-block;
        width: gr(84);
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        font-size: gr(26);
        text-align: center; 
    }
    input{
        width: 100%;
        height: gr(84);
        font-size: gr(26);
        text-indent: gr(84);
        color: black;
        border: none;
    }
    
    input::-webkit-input-placeholder{
        color: #cfcfcf;
    }
}

.account{
     margin: gr(32) auto 0;
}

.password{
     margin: 0 auto;
     border-top:none;
}

.login-btn{
    width: gr(582);
    height: gr(82);
    margin: gr(36) auto 0;
    input{
        width: 100%;
        height: 100%;
        background: #d62d31;
        font-size: gr(29);
        color: white;
        border-radius: gr(14);
        letter-spacing: gr(7);
        appearance: none;
        -webkit-appearance: none;
    }
}


.others{
    width: gr(580);
    margin: gr(29) auto 0;
    span{
        font-size: gr(26);
        a{
          color: #999999; 
        }
    }
    span:first-of-type{
        float: left;
    }
    span:last-of-type{
        float: right;
    }
}

.foot-wrap{
    width: gr(463);
    margin: gr(15) auto 0;
    .chat{
        width: 50%;
        height: gr(60);
        float: left;
        font-size: gr(25);
        text-align: center;
        vertical-align: middle;
        line-height: gr(60);
        span{
            display: inline-block;
            width: gr(33);
            height: gr(27);
 
            img{
                width: 100%;
            }
        }
        a{
            color: #999999;
        }
    }
    .qq{
        width: 49%;
        height: gr(60);
        border-left: gr(1) solid #dedede;
        float: right;
        font-size: gr(25);
        text-align: center;
        vertical-align: middle;
        line-height: gr(60);
        span{
            display: inline-block;
            width: gr(26);
            height: gr(27);
            
            img{
                width: 100%;
            }
        }
        a{
            color: #999999;
        }
    }
}

.popup{
    width: gr(548);
    height: gr(269);
    position: absolute;
    left: gr(50);
    top: gr(311);
    display: none;
    .wrap-1{
        width: gr(249);
        height: gr(183);
        position: absolute;
        left: gr(146);       
        bottom: 0;
        img{
            width: 100%;
        }
    }
    .wrap-2{
        width: gr(42);
        height: gr(42);
        position: absolute;
        right: 0;
        top: 0;
        img{
            width: 100%;
        }
    }
}
